Learn how to design a website with curved or wavy backgrounds using HTML and CSS. Then take things to the next level by adding a morphing SVG animation with JavaScript https://fireship.io/lessons/wavy-backgrounds/

#webdev #css #tutorial

🔗 Resources

Code https://github.com/fireship-io/wavy-curvey-blobby-website
Shape Driver https://www.shapedivider.app/
Haikei App https://haikei.app/

📚 Chapters

00:00 Wavy Web Design
00:49 Flat HTML Website
03:26 CSS Wave
05:51 CSS Bubble 
06:21 SVG Wave
07:15 SVG Layered Wave 
08:58 Animated Blob


 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font